<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .list {
            margin: 200px auto;
        }

        .item {
            float: left;
            margin-right: 10px;
        }
    </style>
</head>

<body>
    <input type="text">
    <button>搜索</button>
    <div class="list">

    </div>
</body>

</html>
<script>
    let ipt = document.querySelector('input')
    let timer = null;
    ipt.oninput = function () {
        clearTimeout(timer);
        timer = setTimeout(() => {
            search();
        }, 1000)
    };

    function search() {
        let xhr = new XMLHttpRequest();
        let productsearchAPI = `http://localhost:8888/goods/list?search=${ipt.value}`;
        xhr.open("GET", productsearchAPI);
        xhr.send();
        xhr.onload = function () {
            console.log("服务器返回数据以后就会自动执行");
            if (xhr.status == 200) {
                console.log(xhr.responseText);//返回响应体，responseText body响应体
                let obj = JSON.parse(xhr.responseText);
                console.log(obj);
                let str = '';
                obj.list.forEach((v) => {
                    v;
                    str += `<div class="item">
            <img src="${v.img_big_logo}">
            <div>${v.title}</div>
            <div>${v.price}</div>
        </div>
        `
                })
                document.querySelector('.list').innerHTML = str;
            }
        };
    }

    function newFn(fn, time) {
        let timer = null;
        return function () {
            clearTimeout(timer);
            timer = setTimeout(() => {
                fn();
            }, time)
        }
    }

    function jieliu() {
        let date = 0;
        return function () {
            if (Date.now() - date > 1000) {
                chufa();
                date = new Date();
            } else {
            }
        }
    };

    let btn = document.querySelector('button')
    let  throttledChufa = jieliu(chufa, 1000)
    btn.onclick = function () {
        console.log('click');
        throttledChufa();
    }

    function chufa() {
        console.log('触发');
        search();
    }

</script>